<template lang="pug">
    div
        h1 通告管理
        Form(ref="form", :model="select", inline)
            FormItem(prop="wx")
                Input(v-model="select.wx", style="width: 300px", placeholder="输入微信号（支持模糊查询）")
            FormItem(prop="title")
                Input(v-model="select.wx", style="width: 300px", placeholder="输入标题（支持模糊查询）")
            FormItem(prop="status")
                Select(placeholder="审核状态", v-model="select.status")
                    Option(v-for="(state, index) in states", :value="state.id", :key="index") {{state.text}}
            FormItem
                Button(@click="index") 查找
                Button(@click="$refs.form.resetFields(), index()", style="margin-left: 20px") 清空

        el-table(:data="data.data")
            el-table-column(prop="title",   label="标题")
            el-table-column(prop="price",   label="价格")
            el-table-column(label="内容")
                template(slot-scope="scope")
                    p {{scope.row.content.slice(0, 20)}} ...
                    Tooltip(placement="right-end", :transfer="true")
                        div(slot="content", style="white-space: normal;") {{scope.row.content}}
                        Button 查看全文
            el-table-column(prop="wx",      label="微信号")
            el-table-column(label="状态")
                template(slot-scope="scope") {{scope.row.state | state}}
            el-table-column(label="创建时间")
                template(slot-scope="scope") {{scope.row.create_time | time}}
            el-table-column(label="更新时间")
                template(slot-scope="scope") {{scope.row.update_time | time}}
            el-table-column(prop="create_user_nickname", label="作者")
            el-table-column(prop="tag_name", label="标签")
            el-table-column(label="操作", width="150")
                template(slot-scope="scope")
                    Button.button(v-if="scope.row.state !== 1", type="info",  @click="update(scope.row.notice_id, 1)") 修改为正常
                    Button.button(v-if="scope.row.state !== -1", type="warning",  @click="update(scope.row.notice_id, -1)") 修改为假通告
                    Button.button(v-if="scope.row.state !== -2", type="error",  @click="update(scope.row.notice_id, -2)") 修改为下架
        Page(:total="data.total_count", @on-change="index")

</template>

<script>
    export default {
        data() {
            return {
                page: 1,
                data: {
                    data: [],
                    total_count: 0,
                },
                select: {
                    wx: '',
                    title: '',
                    state: 0,
                },
            }
        },

        methods: {
            async index(page = 1) {
                const select = Object.assign(this.select);

                if (!select.state) {
                    delete select.state;
                }

                this.data = await this.$http.post('tools_notice/getNoticeList', {page_index: page - 1, page_size: 20, ...select});
                this.page = page;
            },

            async update(notice_id, state) {
                try {
                    await this.$confirm(`确认修改该状态？`, '状态修改确认');
                    await this.$http.post('tools_notice/setNoticeState', {notice_id, state});
                    this.index();
                } catch (e) {}
            }
        },

        created() {
            this.index();
        }
    }
</script>

<style lang="stylus" scoped>
    .ivu-tooltip-popper
        width 500px
</style>
